<template>
  <div class="p-2">
    <div class="mb-2 color-#7f7f7f" style="margin-top: 30px;text-align: center; font-weight: bold">
      <text class="mr-4">物业托管项目数量：<text
          class="text-size-24px color-#f59a23">{{ carrental.propertyCount ? carrental.propertyCount : 0 }}个</text>
      </text>
      <text class="mr-4">物业托管项目总面积：<text
          class="text-size-24px color-#f59a23">{{ carrental.propertyArea ? carrental.propertyArea : 0 }}㎡</text>
      </text>
      <text class="mr-4">物业托管项目总人数：<text
          class="text-size-24px color-#f59a23">{{ carrental.propertyPeople ? carrental.propertyPeople : 0 }}人</text>
      </text>
      <text class="mr-4">总面积/总人数：<text
          class="text-size-24px color-#f59a23">{{ carrental.propertyTotalRatio ? carrental.propertyTotalRatio : 0 }}㎡
          /人</text>
      </text>
    </div>
    <el-row class="mt-10" style="margin-top: 50px;">
      <el-col :span="14" class="card-box">
        <div style="width: 100%;">
          <div style="text-align: center; font-weight: bold; font-size: 18px;margin-bottom: 80px;">人员分布</div>
          <div ref="commandstats" style="height: 600px" />
        </div>
      </el-col>
      <el-col :span="10" class="card-box">
        <div style="width: 100%;">
          <div style="text-align: center; font-weight: bold; font-size: 18px">项目人数排行</div>
          <div ref="axis1" style="height: 290px" />
        </div>
        <div style="width: 100%;margin-top: 50px;">
          <div style="text-align: center; font-weight: bold; font-size: 18px">项目人员配比排行</div>
          <div ref="axis2" style="height: 290px" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Cache" lang="ts">
  import * as echarts from 'echarts';
  import { CacheVO } from '@/api/monitor/cache/types';
  import { personCountPie, personRank, propertyRank, statistics } from '@/api/zichanguanli/tenementbasicInfo';
  import { Right } from '@element-plus/icons-vue';
  import { number } from 'vue-types';

  const cache = ref<Partial<CacheVO>>({});
  const commandstats = ref();
  const axis1 = ref();
  const axis2 = ref();
  const { proxy } = getCurrentInstance() as ComponentInternalInstance;
  var colorList = ['#F6CD9E','#F1B167', '#EA891A' ];
  const getList = async () => {
    try {
      proxy?.$modal.loading('正在加载数据，请稍候！');
      const res = await personCountPie();
      const res2 = await personRank();
      const res2Ydata = res2.data.map((item : any) => item.name);
      const res2Series = res2.data.map((item : any) => Number(item.count));
      const res3 = await propertyRank();
      const res3Ydata = res3.data.map((item : any) => item.name);
      const res3Series = res3.data.map((item : any) => Number(item.matchValue));
      // console.log('🚀 ~ getList ~ res2:', res2);
      //   const res3 = await getCarLineBarChart({
      //     year: '2024',
      //     month: '12'
      //   });
      //   console.log('🚀 ~ getList ~ res3:', res3);
      // console.log('🚀 ~ getCarBrandDistribution ~ res:', res);
      proxy?.$modal.closeLoading();
      const commandstatsIntance = echarts.init(commandstats.value, 'macarons');
      const axis1Intance = echarts.init(axis1.value, 'macarons');
      const axis2Intance = echarts.init(axis2.value, 'macarons');
      commandstatsIntance.setOption({
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          top: 60,
          right: 0
        },
        series: [
          {
            type: 'pie',
            radius: ['50%', '80%'],
            center: ['38%', '50%'],
            data: res.data
          }
        ]
      });
      axis1Intance.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '100px',
          bottom: "10px",
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: res2Ydata,
          axisLabel: {
            // 自定义 formatter，实现超 6 个字符自动换行
            formatter: function (value) {
              const maxLength = 6; // 每行最多显示的字符数
              let result = '';
              for (let i = 0; i < value.length; i += maxLength) {
                // slice 按照 maxLength 的间隔切分
                result += value.slice(i, i + maxLength) + '\n';
              }
              // 去掉末尾多余的换行符，防止最后多一行空行
              return result.trim();
            }
          }

        },
        series: [
          {
            name: '项目人数',
            type: 'bar',
            data: res2Series,
            itemStyle: {
              color: function (params) {
                // 根据数据动态设置颜色
                          return colorList[params.dataIndex % colorList.length];
              }
            }
          }
        ]
      });
      axis2Intance.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '100px',
          bottom: "10px",
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: res3Ydata,
          axisLabel: {
            // 自定义 formatter，实现超 6 个字符自动换行
            formatter: function (value) {
              const maxLength = 6; // 每行最多显示的字符数
              let result = '';
              for (let i = 0; i < value.length; i += maxLength) {
                // slice 按照 maxLength 的间隔切分
                result += value.slice(i, i + maxLength) + '\n';
              }
              // 去掉末尾多余的换行符，防止最后多一行空行
              return result.trim();
            }
          }
        },
        series: [
          {
            name: '项目人数配比',
            type: 'bar',
            data: res3Series,
            itemStyle: {
              color: function (params) {
                // 根据数据动态设置颜色
                          return colorList[params.dataIndex % colorList.length];
              }
            }
          }
        ]
      });
      window.addEventListener('resize', () => {
        commandstatsIntance.resize();
        axis1Intance.resize();
        axis2Intance.resize();
      });
    } catch (error) {
      proxy?.$modal.closeLoading();
    }
  };
  const carrental = ref<any>({
    carCount: undefined,
    rentedCount: undefined,
    rentRate: undefined
  });
  onMounted(async () => {
    const res = await statistics();
    carrental.value = { ...res.data };
    getList();
  });
</script>
